<template>
  <div class="innerappcontainer _inerappcontainer">
    <div>
      <div class="innerapptop _innerapptop">
        <h1>内置 App</h1>
        <p>
          每台 Mac 都内置了众多激发创意、提升效率的
          app，帮助你去探索、交流、高效工作。
        </p>
      </div>
      <div class="innerappbody  _innerappbody">
        <div class="bodyguide">
          <div :class="index === 0 ? 'choosed' : ''" @click="goto(0)">
            <img src="../imgs/nav_icon_logicpro.jpg" alt="">
            <span>照片</span>
          </div>
          <div :class="index === 1 ? 'choosed' : ''" @click="goto(1)">
            <img src="../imgs/nav_icon_mainstage.jpg" alt="">
            <span>iMovie剪辑</span>
          </div>
          <div :class="index === 2 ? 'choosed' : ''" @click="goto(2)">
            <img src="../imgs/nav_icon_finalcut.jpg" alt="">
            <span>Pages文稿</span>
          </div>
          <div :class="index === 3 ? 'choosed' : ''" @click="goto(3)">
            <img src="../imgs/nav_icon_compressor.jpg" alt="">
            <span>Safari浏览器</span>
          </div>
        </div>
        <div class="infoshow _infoshow">
          <p>{{ appinfolist[index] }}</p>
          <img class="macscreeen" src="../imgs/macbookscreen.png" alt="">
          <img class="screeninfo" :src="appinfoimglist[index]" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      appinfolist:['Logic Pro 在你的 Mac 上构建起一座完备的录音和 MIDI 工作室，以别开生面的方式满足你作曲、录音、编辑和混音的各种所需。有了大量功能齐备的插件，以及数千种声音和循环乐段，无论你想创作哪种音乐，都能为你提供从灵感初现到完成最后的母带的各种所需。',
      '专为现场演出打造的全屏幕界面，灵活的硬件操控，以及众多与 Logic Pro X 完全兼容的插件和音效，将你的 Mac 变身现场演出装备。',
      '为了满足如今剪辑师们四溢的灵感，Final Cut Pro 提供开创性的视频剪辑功能、强大的媒体组织整理能力和杰出的性能，并针对 Mac 电脑和 macOS Catalina 进行了全面优化。',
      'Motion 是一款强大的动态图形工具，可帮助你轻松制作电影风格的二维及三维字幕、流畅的转场和逼真的特效，一切效果即时可见。',
      '从 Final Cut Pro 中导出项目的功能变得更强大、更灵活。你可以自定义输出设置，使用分布式编码功能提高工作效率，并且可以轻松将影片打包提交至 iTunes Store。'
      ],
      appinfoimglist:[
        require('../imgs/pro_logicpro.jpg'),
        require('../imgs/pro_mainstage.jpg'),
        require('../imgs/pro_finalcut.jpg'),
        require('../imgs/pro_motion.jpg'),
        require('../imgs/pro_compressor.jpg')
      ],
      // 这个参数用来控制显示的内容
      index: 0,
    };
  },
  methods: {
    goto(i) {
      this.index = i;
    },
  },
};
</script>

<style lang="less" scoped>
@media only screen and(min-width:800px) {
    .innerappcontainer{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        div{
            max-width: 1000px;
            width: 100%;
            background-color:rgb(251, 251, 253);
            padding-top: 30px;
            .innerapptop{
              display: flex;
              flex-direction: column;
              align-items: center;
              h1{
                  padding-bottom: 10px;
              }
              p{
                  text-align: center;
              }
            }
            .innerappbody{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            
            .bodyguide{
                width: 95%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                div{
                    width: 10%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 10px 0;
                    cursor: pointer;
                    img{
                        height: 60px;
                    }
                    span{
                        font-size: 12px;
                    }
                }
                
            }
            .choosed{
            border-bottom: 2px solid rgba(0, 0, 0, 0.3);
          }
          }
          .infoshow{
              position: relative;
              padding: 30px 50px;
              .macscreeen{
                  width: 470px;
                  margin-top: 50px;
              }
              .screeninfo{
                  position:absolute;
                  bottom: 150px;
                  left: 50%;
                  transform: translateX(-50%);
                  z-index: 999;
                  width: 430px;
              }
          }
        }
    }
}
@media only screen and(max-width:800px) {
    ._inerappcontainer{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        div{
            max-width: 1000px;
            width: 100%;
            background-color:rgb(251, 251, 253);
            padding-top: 30px;
            .innerapptop{
              display: flex;
              flex-direction: column;
              align-items: center;
              h1{
                  padding-bottom: 10px;
                  font-size: 5.667vw;
              }
              p{
                  text-align: center;
                  font-size: 2.667vw;
                  padding: 2.667vw;
              }
            }
            .innerappbody{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            
            .bodyguide{
                width: 95%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                div{
                    width: 10%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 10px 0;
                    cursor: pointer;
                    img{
                        height: 8vw;
                    }
                    span{
                        font-size: 1.6vw;
                    }
                }
                
            }
            .choosed{
            border-bottom: 2px solid rgba(0, 0, 0, 0.3);
          }
          }
          .infoshow{
              position: relative;
              padding: 30px 0px;
              p{
                 font-size: 2.667vw; 
              }
              .macscreeen{
                  width: 300px;
                  margin-top: 50px;
              }
              .screeninfo{
                  position:absolute;
                  bottom: 110px;
                  left: 50%;
                  transform: translateX(-50%);
                  z-index: 999;
                  width: 280px;
              }
          }
        }
    }
}
</style>